for迴圈

重複執行一段程式碼語法結構，處理大量資料、執行重複任務達到特定效果，而且語法更簡潔，適合需要初始化和更新變數情況

• 使用語法

for (<初始化語句>; <條件語句>; <更新語句>) {
  // 迴圈體
}

for (var i = 0; i < 10; i++) {
  console.log(i);
}
//輸出
0
1
2
3
4
5
6
7
8
9

• Break

跳出迴圈，並繼續執行迴圈之後程式碼

• Continue

跳過當前迴圈迭代，並繼續執行下一次迴圈迭代

for (var i = 0; i < 10; i++) {
  if (i === 8) {
    break;
  }
  console.log(i);
}
//輸出
0
1
2
3
4
5
6
7

forEach

在陣列中迭代每個元素簡單方法，接受一個回呼函數為參數，會在每個元素用一次

• 使用語法

const num = [1, 2, 3, 4, 5, 6];

numbers.forEach((num) => {
  console.log(num);
});
//輸出
1
2
3
4
5
6

array 需要迭代陣列
callback 回呼函數

array.forEach(callback);

currentValue 當前迭代元素值
index 當前迭代元素索引
array 原始陣列

function callback(currentValue, index, array) {
  // 對每個元素執行操作
}

• 執行各種操作

  • 每個元素顯示一個消息
  • 每個元素執行計算
  • 每個元素進行驗證

// 顯示一個消息
const numbers = [1, 2, 3, 4, 5, 6];

numbers.forEach((number) => {
  console.log(`Number: ${number}`);
});
//輸出
Number: 1
Number: 2
Number: 3
Number: 4
Number: 5
Number: 6

// 執行計算
const numbers = [1, 2, 3, 4, 5, 6];

numbers.forEach((number) => {
  number = number * 2;
});
console.log(numbers); // [1,2,3,4,5,6]

// 進行驗證
const numbers = [1, 2, 3, 4, 5, 6];

numbers.forEach((number) => {
  if (number % 2 === 0) {
    console.log(`Even number: ${number}`);
  }
});
//輸出
Even number: 2
Even number: 4
Even number: 6

for...in

一種控制流語句，可迭代物件可枚舉屬性，可枚舉屬性是可列出或計數屬性，包含自身屬性和繼承屬性

• 使用語法

obj 要迭代物件
prop 變數按順序分配給物件每個可枚舉屬性名稱

for (const prop in obj) {
  // 程式碼區塊
}

const obj = {
  name: "Cindy",
  age: 27,
  occupation: "Software Engineer"
};

for (const prop in obj) {
  console.log(`${prop}: ${obj[prop]}`);
}
// 輸出
name: Cindy
age: 27
occupation: Software Engineer

• 注意事項

  • 將迭代物件所有可枚舉屬性，包含繼承屬性
  • 不會迭代物件非可枚舉屬性，例如 symbol 屬性
  • 以任意順序迭代物件屬性
  • 不是迭代陣列最佳方法

const obj = {
  name: "Cindy",
  age: 27,
  occupation: "Software Engineer"
};

const properties = [];

for (const prop in obj) {
  properties.push(obj[prop]);
}

console.log(properties); 
// ["name", "age", "occupation"]
// [ 'Cindy', 27, 'Software Engineer' ]

檢查物件是否具有特定屬性

const obj = {
  name: "Cindy",
  age: 27,
  occupation: "Software Engineer"
};

const hasName = "name" in obj;
const hasAge = "age" in obj;
const hasOccupation = "occupation" in obj;

console.log(hasName, hasAge, hasOccupation); // true true true

遍歷物件所有屬性，並執行某些操作

const obj = {
  name: "Cindy",
  age: 27,
  occupation: "Software Engineer"
};

for (const prop in obj) {
  console.log(`${prop}: ${obj[prop]}`);
}
//輸出
name: Cindy
age: 27
occupation: Software Engineer

for...of

迴圈是一種控制流語句，可迭代物件的值，例如：陣列、字符串、Set、Map

• 使用語法

for (const value of iterable) {
  // 程式碼區塊
}

iterable 參數是要迭代可迭代物件
value 變數按順序分配給可迭代物件中的每個值

const arr = [1, 2, 3, 4];

for (const number of arr) {
  console.log(number);
}

//輸出
1
2
3
4

• 注意事項

  • 只能迭代可迭代物件
  • 會特定順序迭代可迭代物件的值
  • 是迭代陣列的最佳方法

遍歷陣列中所有值

const arr = [1, 2, 3, 4];

for (const number of arr) {
  console.log(number);
}

//輸出
1
2
3
4

遍歷字符串所有字符

const str = "Hello world";

for (const char of str) {
  console.log(char);
}

//輸出
H
e
l
l
o

 
w
o
r
l
d

遍歷 Set 所有值

const set = new Set([1, 2, 3, 4]);

for (const number of set) {
  console.log(number);
}

//輸出
1
2
3
4

遍歷 Map 所有鍵值對

const map = new Map([
  [1, "one"],
  [2, "two"],
  [3, "three"]
]);

for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}
//輸出
1: one
2: two
3: three

for、forEach、for...in、for...of優缺點和使用時機

while迴圈

重複執行一段程式碼，直到某個條件是 false 為止

• 使用語法

while (<條件語句>) {
  // 迴圈體
}

每一次迴圈之前執行，如果條件是 true，會繼續執行直到條件為 false 結束

// 從0開始，遞增1，直到大於9
var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}
//輸出
0
1
2
3
4
5
6
7
8
9

// 從0開始，遞增1，直到大於9，如果遇到7，跳出迴圈。
var i = 0;
while (i < 10) {
  if (i === 7) {
    break;
  }
  console.log(i);
  i++;
}
//輸出
0
1
2
3
4
5
6

可以使用 continue 繼續迴圈

// 從0開始，遞增1，直到大於10。如果遇到6，跳過當前條件
var i = 0;
while (i < 11) {
  if (i === 5) {
    continue;
  }
  console.log(i);
  i++;
}
//輸出
0
1
2
3
4
5
7
8
9
10

for、while迴圈區別

// while 迴圈
var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

// for 迴圈
for (var i = 0; i < 10; i++) {
  console.log(i);
}

資料來源:JavaScript 迴圈：for 迴圈、forEach、for...in、for...of 一次搞清楚
Loop 迴圈